<template>
	<view class="register-page">
		<!-- 导航 -->
		<van-nav-bar left-text="返回" title="注册用户" left-arrow @click-left="Back" />
		<!-- 动态背景 -->
		<video class="videoContainer" src="../../static/CCND4006.mp4" loop muted autoplay initial-time="4"
			controls="false"></video>
		<!-- logo -->
		<image class=" logo" src="../../static/favicon.ico"></image>
		<!-- 注册表单 -->
		<van-form @submit="onSubmit">
			<van-cell-group inset>
				<!-- 账号 phone -->
				<van-field v-model="phone" name="phone" label="用户" placeholder="手机号/账号/邮箱"
					:rules="[{ required: true, message: '请填写用户名' }]" />
				<!-- 密码 password-->
				<van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码"
					:rules="[{ required: true, message: '请填写密码' }]" />
				<!-- 确认密码 password2 -->
				<van-field v-model="password2" type="password" name="password2" label="确认" placeholder="请重复密码"
					:rules="[{ required: true, message: '请重复密码' }]" />

				<!-- 验证码图片 -->
				<view style=" display: flex; align-items:center; height: 100rpx; ">
					<van-field v-model="code" type="code" name="code" label="验证码" placeholder="输入验证码"></van-field>
					<img class="codeImg" src="http://172.30.1.242:8080/moto/User/validate" @click="updateCode">
				</view>

			</van-cell-group>
			<!-- 注册按钮 -->
			<view style="margin: 16px;">
				<van-button round block type="primary" native-type="submit">
					注册
				</van-button>
			</view>
		</van-form>
		<!-- 跳转登录 -->
		<navigator class="goLogin" url="../login/login">已有账号? 去登录</navigator>
		<!-- 用户协议 -->
		<view class="tip">
			<label>
				<checkbox :checked="ok" @click="ok=!ok" />
			</label>
			已阅读并同意
			<navigator url="../yonghuxieyi/yonghuxieyi">《用户协议》</navigator>
			和<navigator url="../yinsizhengce/yinsizhengce">《隐私政策》</navigator>
		</view>
	</view>
</template>

<script setup>
	// vant 组件
	import {
		showFailToast,
		showSuccessToast
	} from 'vant'

	// 封装请求
	import $api from '../../request/index.js'
	// 页面生命周期
	// import {
	// 	onShow
	// } from '@dcloudio/uni-app'

	import {
		ref
	} from 'vue'


	let phone = ref('')
	let password = ref('')
	let password2 = ref('')
	let code = ref('')
	let ok = ref(false)
	let codeImg = ref('')

	function onSubmit(value) {
		console.log(value)
		let {
			phone,
			password,
			password2,
			code
		} = value

		if (!ok.value) {
			return showFailToast('请先阅读协议')
		} else if (password != password2) {
			return showFailToast('密码不一致')
		} else if (!code) {
			return uni.showToast({
				title: "请输入验证码",
				icon: 'error'
			})
		}

		$api.post('/moto/User/register', {
			phone,
			password,
			code,
		}).then(res => {
			console.log(res)
			if (res.code) {
				showSuccessToast('注册成功')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}, 1500)
			}
		})
	}

	const updateCode = (e) => e.target.src = 'http://172.30.1.242:8080/moto/User/validate?' + Date.now()


	// 返回
	const Back = () => uni.navigateBack()
</script>

<style>
	.register-page {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
	}

	.logo {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		box-shadow: 0 0 30px 0px #ffd900;
		display: block;
		margin: 60rpx auto;
	}

	h2 {
		box-sizing: border-box;
		text-align: left;
		padding-top: 60rpx;
		padding-left: 40rpx;
	}

	input {
		width: 70%;
		padding: 20rpx 30rpx;
		background-color: #F8F8F8;
		margin: 40rpx auto;
		border-radius: 20rpx;
	}

	.van-cell.van-field {
		background-color: #F8F8F8;
		margin: 40rpx auto;
		font-size: 30rpx;
		color: #D4D4D4;
		border-radius: 20rpx;
	}

	.van-button {

		border-radius: 20rpx
	}

	.tip {
		display: flex;
		color: #D1D1D1;
		font-size: 12px;
		align-items: center;
		margin: 20rpx;
		justify-content: center;
	}

	.goLogin {
		padding: 0 60rpx;
		text-align: right;
		font-size: 12px;
	}

	navigator {
		color: #7EA8E3;
	}

	.accredit {
		margin-top: 100rpx;
		display: flex;
		justify-content: center;
	}

	.accredit>image {
		width: 70rpx;
		height: 70rpx;
		margin: 0 40rpx;
	}

	.codeImg {
		margin-left: 10px;
		width: 240rpx;
		height: 80rpx;
		border: 1px solid;
	}

	.van-cell-group.van-cell-group--inset {
		background-color: rgba(0, 0, 0, 0);
	}

	.van-cell.van-field {
		background-color: rgba(255, 255, 255, 0.9);
	}

	.videoContainer {
		position: fixed;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: -100;
	}

	.videoContainer:before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		display: block;
		z-index: -1;
		top: 0;
		left: 0;
		background: rgba(25, 29, 34, .65);
	}
</style>